<template>
    <div class="content-container">
        <Title :icon="'questionnaire-fill'" :title="'问答数据'"></Title>
        <div class="aq-data">
            <ul class="flex">
                <li class="flex flex-1 justify-between items-center">
                    <div class="flex items-center">
                        <span>AI对话问题数量</span>
                        <p>{{ state.ai }}</p>
                    </div>
                    <div class="icons"><img src="@/assets/images/ai.png" alt=""></div>
                </li>
                <li class="flex flex-1 justify-between items-center">
                    <div class="flex items-center">
                        <span>平均排名</span>
                        <p>{{ state.average }}</p>
                    </div>
                    <div class="icons"><img src="@/assets/images/average.png" alt=""></div>
                </li>
                <li class="flex flex-1 justify-between items-center">
                    <div class="flex items-center">
                        <span>更新时间</span>
                        <p>{{ state.updateTime }}</p>
                    </div>
                    <div class="icons"><img src="@/assets/images/distillation.png" alt=""></div>
                </li>
            </ul>
        </div>
    </div>

</template>

<script setup lang="ts">
import Title from '@/components/Title/index.vue'
import { getQuestionDataApi } from '@/api/geoBasic/index'

const state = reactive({
    distillation: 0,
    ai: 0,
    average:0,
    updateTime:''
})

async function getQuestionData() {
    const res: ResType = await getQuestionDataApi("/GEOBasicApi/GetKeywordCount")
    if (res.code === 200) {
        state.distillation = res.data.keywordcount
        state.ai = res.data.aicount
        state.average = res.data.averageRank
        state.updateTime = res.data.updatetime
    }
}

onMounted(() => {
    getQuestionData()
})
</script>

<style lang="scss"></style>